<template>
    <div id="home">
        <div class="top"><span>销售热线：<a href="">400-810-9528</a>
                <span>客服热线：<a href="">400-886-9528</a></span>
            </span> </div>
        <div class="header">
            <div><img src="../assets/image/aa.png" alt=""></div>
            <input type="text" placeholder="免保证金用电脑">
            <!-- <span><a href="">登录</a></span> -->
            <router-link to="/login" >登录</router-link>
        </div>
        <!-- 轮播图 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" v-if="goodslist">
            <van-swipe-item v-for="(item,index) in goodslist.loopLogo
            " :key="index">
                <img :src="item.logo" alt="">
            </van-swipe-item>

        </van-swipe>
        <div class="con-top"> </div>
        <div class="conlist" v-if="goodslist">
            <ul class="frist-ul">
                <li v-for="(item,index) in goodslist.hotModel
                    " :key="index" class="frist-li">
                    <router-link :to="'/detail/'+item.productId">
                        <span>{{item.title}}</span>
                        <p>￥{{item.minRent}}/月</p>
                        <div class="img">
                            <img :src="item.url" alt="">
                        </div>
                    </router-link>
                </li>



            </ul>
        </div>
        <div class="register">
            <img src="../assets/image/zhuce.png" alt="">
        </div>
        <div class="content">
            <ul>
                <li>
                    <span>1分钟</span>
                    <i>选择机型</i>
                    <img src="../assets/image/dn.png" alt="">
                </li>
                <li>
                    <span>1分钟</span>
                    <i>获得免保证金额度</i>
                    <img src="../assets/image/meony.png" alt="">
                </li>
                <li>
                    <span>1分钟</span>
                    <i>提交订单</i>
                    <img src="../assets/image/xz.png" alt="">
                </li>
            </ul>
        </div>
        <section class="box">
            <div class="title">行政办公</div>
            <ul>
                <li>
                    <span>
                        全新 联想 M737t
                    </span>
                    <em>
                        ￥118/月
                    </em>
                    <div class="computed">
                        <img src="../assets/image/222.jpg" alt="">
                    </div>
                </li>
                <li>
                    <div class="li-top">
                        <span>ThinkPad T420</span>
                        <em>￥90/月</em>
                        <img src="../assets/image/33.jpg" alt="">
                    </div>
                    <div class="li-bottom">
                        <span>全新 ThinkPad L14</span>
                        <em>￥115/月</em>
                        <img src="../assets/image/44.jpg" alt="">
                    </div>
                </li>
            </ul>
        </section>
        <section class="product-floor" v-if="goods[1]">
            <div class="title">技术开发</div>
            <ul>
                <li class="li-1" v-for="(item,index) in goods[1].products
                " :key='index'>
                 <router-link :to="'/detail/'+item.productId">
                   <div>
                        <img :src="item.url" alt="">
                    </div>
                    <span>{{item.title}}</span>
                    <i>￥{{item.minRent}}/月</i>
                  </router-link>
                </li>

            </ul>

        </section>
        <section class="box">
            <div class="title">商务便携</div>
            <ul>
                <li>
                    <span>
                        全新 惠普 星13
                    </span>
                    <em>
                        ￥148/月
                    </em>
                    <div class="computed">
                        <img src="../assets/image/hp.png" alt="">
                    </div>
                </li>
                <li>
                    <div class="li-top">
                        <span>ThinkPad T420</span>
                        <em>￥90/月</em>
                        <img src="../assets/image/33.jpg" alt="">
                    </div>
                    <div class="li-bottom">
                        <span>全新 ThinkPad L14</span>
                        <em>￥115/月</em>
                        <img src="../assets/image/44.jpg" alt="">
                    </div>
                </li>
            </ul>
        </section>
        <section class="product-floor" v-if="goods[3]">
            <div class="title">图形处理</div>
            <ul>
                <li class="li-1" v-for="(item,index) in goods[3].products" :key='index'>
                    <router-link :to="'/detail/'+item.productId">
                       <div>
                        <img :src="item.url" alt="">
                       </div>
                       <span>{{item.title}}</span>
                       <i>￥{{item.minRent}}/月</i>
                    </router-link>
                   
                </li>

            </ul>

        </section>
        <section class="box">
            <div class="title">外设配置</div>
            <ul>
                <li>
                    <span>
                        全新 联想 M737t
                    </span>
                    <em>
                        ￥118/月
                    </em>
                    <div class="computed">
                        <img src="../assets/image/222.jpg" alt="">
                    </div>
                </li>
                <li>
                    <div class="li-top">
                        <span>ThinkPad T420</span>
                        <em>￥90/月</em>
                        <img src="../assets/image/33.jpg" alt="">
                    </div>
                    <div class="li-bottom">
                        <span>全新 ThinkPad L14</span>
                        <em>￥115/月</em>
                        <img src="../assets/image/44.jpg" alt="">
                    </div>
                </li>
            </ul>
        </section>
        <div class="foot">已经滑到底部</div>
    </div>
</template>

<script>
    import {
        getlist
    } from '../api/goodList';
    import Vue from 'vue';
    import {
        Swipe,
        SwipeItem
    } from 'vant';
    Vue.use(Swipe);
    Vue.use(SwipeItem);

    export default {
        data() {
            return {
                goodslist: null,
                goods: []

            }
        },
        created() {
            getlist().then(res => {
                this.goodslist = res.data.data
                this.goods = res.data.data.floors
                console.log(res.data.data)
                // console.log(res.data.data.floors)
            })
        },

    }
</script>
<style lang='css' src='../assets/css/home.css' scoped>

</style>
<style lang="less" scoped>

</style>